<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
</head>
<body>
<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm" id="insert"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm" id="update"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
</div>
<!--<table class="layui-table" lay-data="{url:'http://192.168.43.95:8080/api/student/findAllData', id:'test3'}" lay-filter="test3">
    <thead>
    <tr>
        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
        <th lay-data="{field:'studentName', width:120, sort: true, edit: 'text'}">学生姓名</th>
        <th lay-data="{field:'studentNumber', edit: 'text', minWidth: 150}">学号</th>
        <th lay-data="{field:'department', width:80, edit: 'text'}">系部</th>
        <th lay-data="{field:'major', edit: 'text', minWidth: 100}">专业</th>
        <th lay-data="{field:'grade', sort: true, edit: 'text'}">年级</th>
        <th lay-data="{field:'achievement', sort: true, edit: 'text'}">成绩</th>
    </tr>
    </thead>
</table>-->
<table id="test3" lay-filter="test3" class="layui-hide"></table>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/layui/layui.all.js"></script>
<script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var tableData=new Array(); // 用于存放表格数据
    $.ajax({
        url: "http://192.168.43.95:8093/findAllData"
        ,type:"get"
        ,async:false
        ,dataType:"json"
        , success: function(result){
            tableData=result;
            console.log(result);
        }
    });
    layui.use('table', function() {
        debugger;
        var table = layui.table;
        table.render({
            elem: '#test3'
            , data: tableData
            , cols: [
                [
                {title: '序号', type: 'numbers', Width: 20}
                , {field: 'id', title: 'id', sort: true}
                , {field: 'studentName', title: '学生姓名', edit: 'text', minWidth: 120}
                , {field: 'studentNumber', title: '学号', edit: 'text', minWidth: 120, sort: true, edit: 'text'}
                , {field: 'department', title: '系部', edit: 'text', minWidth: 120, sort: true}
                , {field: 'major', title: '专业', minWidth: 80, edit: 'text'}
                , {field: 'grade', title: '年级', minWidth: 100, edit: 'text'}
                , {field: 'achievement', title: '成绩', minWidth: 80, edit: 'text'}
                ]
            ]
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
            }
            , done: function (res, curr, count) {
            }

        });
    })
    //点击加号按钮时，新添一行
    $("#addTable").click(function(){
        var oldData =  table.cache["baseInfo"];
        var data1={"colName":"ID2","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0};
        oldData.push(data1);
        table.reload('baseInfo',{
            data : oldData
        });
    });
    /*$("#insert").click(function(){
        var table = layui.table;
        var s=table.cache.test3.length;
        var tr=" <tr data-index=\""+s+"\">"+
            "  <td data-field=\"id\"  data-edit='text' data-key=\"1-0-1\"><div class='layui-table-cell laytable-cell-1-0-1  '> </div></td>"+
            "  <td data-field=\"studentName\"  data-edit='text' data-key=\"1-0-2\"><div class='layui-table-cell laytable-cell-1-0-2  '> </div></td>"+
            "  <td data-field=\"studentNumber\"  data-edit='text' data-key=\"1-0-3\"><div class='layui-table-cell laytable-cell-1-0-3  '> </div></td>"+
            "  <td data-field=\"department\"  data-edit='text' data-key=\"1-0-4\"><div class='layui-table-cell laytable-cell-1-0-4  '> </div></td>"+
            "  <td data-field=\"major\"  data-edit='text' data-key=\"1-0-5\"><div class='layui-table-cell laytable-cell-1-0-5  '> </div></td>"+
            "  <td data-field=\"grade\" data-edit='text' data-key=\"1-0-6\"><div class='layui-table-cell laytable-cell-1-0-6  '> </div></td>"+
            "  <td data-field=\"achievement\"  data-edit='text' data-key=\"1-0-7\"><div class='layui-table-cell laytable-cell-1-0-7  '> </div></td>"+
            "  </tr>";
        $(".layui-table-body .layui-table  tbody").append(tr);	});
    $("#update").click(function(){
        layui.use('table', function(){
            debugger;
            var table = layui.table;
            var data=table.cache.test3;
        })
    })
    layui.use('table', function(){
        var table = layui.table;

        //监听单元格编辑
        table.on('edit(test3)', function(obj){
            debugger;
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });
    });*/
</script>

</body>
</html>